<template>
  <view class="container">
    <!-- 宠物选择表单组：下拉选择宠物 -->
<view class="form-group">
  <text class="label">选择宠物</text>
  <picker 
    @change="handlePetChange" 
    :value="petIndex"  
    :range="petList"  
    :range-key="'text'"  
    class="native-picker"
  >
    <view class="picker-display">
      {{ petList[petIndex]?.text || '请选择宠物' }}
      <uni-icons type="down" size="14" color="#666" class="down-icon"></uni-icons>
    </view>
  </picker>
</view>

    <!-- 日期选择表单组：选择日程日期 -->
<view class="form-group">
  <text class="label">日程日期</text>
  <picker 
    mode="date" 
    :value="scheduleDate" 
    start="1970-01-01"  
    end="2100-12-31"    
    @change="handleDateChange"
    class="native-picker"
  >
    <view class="picker-display">
      {{ scheduleDate || '请选择日期' }}
      <uni-icons type="down" size="14" color="#666" class="down-icon"></uni-icons>
    </view>
  </picker>
</view>

    <!-- 备注输入表单组：输入日程详情 -->
    <view class="form-group">
      <text class="label">备注信息</text>
      <textarea 
        v-model="notes" 
        placeholder="请输入日程详情（如：疫苗接种、体检等）"
        class="textarea"
      ></textarea>
    </view>

    <!-- 提交按钮：保存日程 -->
    <button class="submit-btn" @click="handleSubmit">保存日程</button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import petScheduleApi from '@/api/Schedule.js'; // 导入封装的日程API

// 响应式数据定义
const selectedPet = ref(''); // 选中的宠物ID
const scheduleDate = ref(''); // 选择的日程日期
const notes = ref(''); // 日程备注信息
const petList = ref([]); // 宠物下拉选项列表
const ownerId = ref(''); // 宠物主人ID（实际需从缓存/登录态获取）
const petIndex = ref(-1); // 初始值设为-1（未选择）

onLoad((options) => {
	// options 包含跳转时携带的参数（即 ?ownerId=xxx 中的值）
	 if (options.ownerId) {
	   ownerId.value = options.ownerId; 
	   console.log("从列表页接收的 ownerId：", ownerId.value); // 验证是否接收成功
	 }
})

// 页面挂载时执行：加载宠物列表
onMounted(() => {
  fetchPets();
});

// 获取宠物列表：调用API按主人ID查询宠物
const fetchPets = async () => {
  try {
    const res = await petScheduleApi.getPetsByOwnerId(ownerId.value);
    if (res.data.code === 200) {
      petList.value = res.data.data.map(pet => ({
        value: pet.petId,
        text: pet.name
      }));
      // 若有宠物，默认选中第一个（可选逻辑）
      if (petList.value.length > 0) {
        petIndex.value = 0;
        selectedPet.value = petList.value[0].value;
      }
    }
  } catch (err) {
    uni.showToast({ title: '获取宠物失败', icon: 'none' });
    console.error('获取宠物列表失败的错误信息：', err);
  }
};

// 宠物选择回调：同步选中的宠物ID
const handlePetChange = (e) => {
  const selectedIdx = e.detail.value;
  petIndex.value = selectedIdx;
  selectedPet.value = petList.value[selectedIdx]?.value; // 同步选中的宠物ID
};
// 新增日期选择回调（原生日期选择器专用）
const handleDateChange = (e) => {
  scheduleDate.value = e.detail.value; // 直接接收 YYYY-MM-DD 格式
};

// 提交表单：验证并调用API保存日程
const handleSubmit = async () => {
  // 表单验证
  if (!selectedPet.value) {
    return uni.showToast({ title: '请选择宠物', icon: 'none' });
  }
  if (!scheduleDate.value) {
    return uni.showToast({ title: '请选择日期', icon: 'none' });
  }
  if (!notes.value) {
    return uni.showToast({ title: '请输入备注', icon: 'none' });
  }

  try {
    // 调用添加日程API
    const res = await petScheduleApi.add({
      petId: selectedPet.value,
      ownerId: ownerId.value,
      scheduleDate: scheduleDate.value,
      notes: notes.value,
      status: 0 // 默认待处理状态
    });
    console.log('添加日程返回数据：', res);
    uni.showToast({ title: '添加成功', icon: 'success' });
    setTimeout(() => {
      uni.navigateBack(); // 返回列表页
    }, 1500);
  } catch (err) {
    uni.showToast({ title: '添加失败', icon: 'none' });
    console.error('添加日程失败的错误信息：', err);
  }
};
</script>

<style scoped>
	/* 原生下拉框通用样式 */
	.native-picker {
	  width: 100%;
	  height: 60rpx;
	  border: 1px solid #eee;
	  border-radius: 10rpx;
	  padding: 0 15rpx;
	  box-sizing: border-box;
	}
	
	/* 下拉框显示文本样式 */
	.picker-display {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  line-height: 60rpx;
	  font-size: 26rpx;
	  color: #333;
	}
	
	/* 下拉图标样式 */
	.down-icon {
	  margin-left: 10rpx;
	}
/* 样式部分确保表单布局和交互正常 */
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.form-group {
  margin-bottom: 30rpx;
  background-color: #fff;
  padding: 25rpx;
  border-radius: 15rpx;
}

.label {
  display: block;
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.textarea {
  width: 100%;
  min-height: 150rpx;
  border: 1px solid #eee;
  border-radius: 10rpx;
  padding: 15rpx;
  font-size: 26rpx;
  box-sizing: border-box;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #42b983;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-top: 50rpx;
}
</style>